<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
        }
        /* img和background的区别 */
        /* 标准写法 */
        div{
            width: 200px;
            height: 200px;
            background: linear-gradient(30deg,red,green)
        }
        /* 兼容写法 */
        section{
            width: 200px;
            height: 200px;
            background: -webkit-linear-gradient(60deg,red,green)
        }
    </style>
</head>
<body>
    <div></div>  <br>
    <section></section>
</body>
</html>
<!-- 
    线性渐变属性的使用
        属性:background
        属性值:linear-gradient(方向,颜色1,颜色2,颜色3)
            - 第一个参数表示方向
            - 第二个参数表示颜色
            - 第三个参数表示颜色
            - ....
        总结:
            - 每个参数需要用逗号隔开
            - 线性渐变是有兼容问题的,标准写法和兼容写法

        第一个参数表示方向
            1.标准写法
                - 从一个方向去另一个反向 to+结束方向值
                - 从一个角去另外一个角 to+水平反向 垂直反向
                - 角度值 deg 角度 渐变角度值
            2.兼容写法
                - 从一个方向去另一个反向 
                    - 不能加to 
                    - 起始位置
                - 从一个角去另外一个角  起始角
                - 90deg-标准写法的角度值

        第二个参数表示颜色
            1.标准写法
                - 英文单词、十六进制、rgba()
            2.兼容写法


        总结:在工作中线性渐变的使用 
            - 不考虑兼容写法的，css3代码
            - background:linear-grandient(to 结束的方向值,颜色值1,,颜色值2)



 -->